<template>
  <div class="box1" v-if="carStore.list.length===0">
    <header class="CarHead">
      <span>
        <van-icon @click="goBack" class="goBack" name="arrow-left" />
        {{ route.query.TextTitle }}
      </span>
    </header>
    <main class="main">
      <div></div>
      <div class="center">
        <img class="pic" src="../../img/加载/car.png" alt />
        <p v-show="route.query.TextTitle === '购物车'">购物车空空如也~</p>
        <p v-show="route.query.TextTitle === '购物车'">快去商城挑挑看喜欢的商品进行加购吧~</p>
        <p v-show="route.query.TextTitle === '支付失败'">支付失败</p>
        <p v-show="route.query.TextTitle === '支付失败'">貌似出了点问题，点击下方按钮重新支付</p>
        <p v-show="route.query.TextTitle === '余额不足'">emmm,似乎余额不够了</p>
        <p v-show="route.query.TextTitle === '余额不足'">要不要试试看去出售更多废品呢？</p>
        <van-button v-show="route.query.TextTitle === '支付失败'" plain hairline type="primary"
          color="#ff6e8f">重新支付</van-button>
        <van-button v-show="route.query.TextTitle === '余额不足'" plain hairline type="primary"
          color="#ff6e8f">预约上门回收</van-button>
      </div>
      <van-button v-show="route.query.TextTitle === '购物车'" class="Btn" type="primary" block color="#ff6e8f"
        to="/Shop">去商场逛逛</van-button>
      <van-button v-show="route.query.TextTitle === '支付失败'" class="Btn" type="primary" block color="#ff6e8f"
        to="/Shop">放弃支付</van-button>
      <van-button v-show="route.query.TextTitle === '余额不足'" class="Btn" type="primary" block color="#ff6e8f"
        to="/Shop">返回首页</van-button>
    </main>
  </div>
  <div class="box" v-if="carStore.list.length!==0">
    <div class="Background">
      <img src="../../img/首页/u19.png" alt />
    </div>
    <HandVue @back="goBack" :left="true" title="购物车" :iconbool="false"></HandVue>
    <div class="CarList">
      <div class="ul">
        <van-checkbox-group v-model="checked" ref="checkboxGroup">
          <div v-for="item in carStore.list" :key="item.cid" class="goods">
            <van-checkbox :label-disabled="true" :name="item.cid">
              <van-card class="Card" :price="item.price" :origin-price="item.totleprice" :title="item.name"
                :thumb="item.photo">
                <template #footer>
                  <div class="footer">
                    <span class="Total">{{(item.num * item.price)}}币</span>
                    <van-button @click="deleteCar(item.cid)" class="delete" size="mini">
                      <van-icon name="delete-o" />
                    </van-button>
                  </div>
                </template>
              </van-card>
              <van-stepper class="number" v-model="item.num" button-size="4vw" integer />
            </van-checkbox>
          </div>
          <div class="goodsBottom">到底了哟~</div>
        </van-checkbox-group>
      </div>
    </div>
    <div class="bottom">
      <van-button class="left" type="primary">
        <van-checkbox v-model="AllChecked"
          @click="checked.length == carStore.list.length ? toggleAll() : checkAll()">全选</van-checkbox>
      </van-button>

      <van-button class="right" type="primary" @click="goOrder">立即结算</van-button>
    </div>
  </div>
</template>



<script setup>
import HandVue from "../../components/Hand.vue";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router"
import { useCarStore } from "../../stores/car";
import { deleteCarList } from "../../api/index.js"
const carStore = useCarStore()
const router = useRouter();
const route = useRoute();
console.log(route.query.isEmpty)

const checked = ref([]);
const checkboxGroup = ref(null);
const AllChecked = ref(false);
function AllCheckedState() {
  if (checked.value.length == carStore.list.length) {
    AllChecked.value = true;
  } else {
    AllChecked.value = false;

  }
}
AllCheckedState();
const checkAll = () => {
  checkboxGroup.value.toggleAll(true);
};
const toggleAll = () => {
  checkboxGroup.value.toggleAll();
};
function goOrder() { }
function goBack() {
  router.go(-1)
}
async function deleteCar(id) {
  const token = localStorage.getItem("token");
  await carStore.deleteInfo(id)
  await carStore.getInfo(token)
  
  // if (carStore.list.length === 0) {
  //   isEmpty.value = false
  // }
  router.push({
    path: '/Car',
    query: {
      TextTitle: "购物车",
    }
  });
}
</script>

<style scoped>
.Background {
  position: absolute;
  top: -16vw;
  left: 0;
  width: 100%;
  height: 234px;
}

.Background>img {
  width: 100%;
  height: 100%;
}

.CarList {
  height: 100vh;
  margin-top: 24vw;
  padding: 6.667vw 0 0 0;
  background: #ecfdfa;
}

.CarList>.ul {
  overflow-y: scroll;
  transform: translateY(-21.333vw);
  z-index: 11;
  width: 90vw;
  margin: 0 5vw;
}

.Card {
  width: 79vw;
  background: white;
}

.CarList>.ul .goods {
  margin-bottom: 2.667vw;
  background: white;
  border-radius: 4vw;
  padding: 2.667vw;
  position: relative;
}

.CarList>.ul .goodsBottom {
  font-size: 3.733vw;
  color: #999;
  text-align: center;
  background: none;
}

.delete {
  border: none;
  font-size: 4.8vw;
}

.Total {
  font-size: 4vw;
  font-weight: bold;
  color: #ff5e81;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: right;
}

.number {
  position: absolute;
  bottom: 13.333vw;
  right: 6vw;
}

.bottom {
  width: 100vw;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 20vw;
  font-weight: bold;
}

.bottom>.left {
  height: 100%;
  flex: 1;
  border-radius: 0;
  background: white;
  color: black;
  border: none;
}

.bottom>.right {
  height: 100%;
  flex: 1;
  border-radius: 0;
  background: #2bcddd;
  border: none;
}

.radio {
  line-height: 20vw;
}

.box1 {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.CarHead {
  background: #ff6e8f;
  padding: 5.333vw 0 26.667vw 5.333vw;
}

.CarHead>span {
  font-size: 5.333vw;
  color: white;
  font-weight: bold;
}

.goBack {
  margin-right: 2.667vw;
}

.main {
  flex: 1;
  background: white;
  border-top-left-radius: 4vw;
  border-top-right-radius: 4vw;
  transform: translateY(-5.333vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pic {
  width: 66.667vw;
  height: 53.334vw;
}

.Btn {
  width: 90vw;
  font-size: 2.933vw;
  color: white;
  font-weight: bold;
  border-radius: 6.667vw;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.center>p {
  font-size: 2.933vw;
  color: #999999;
}
</style>